<!--
<template>
	<view class="container">
		&lt;!&ndash; 加载状态 &ndash;&gt;
		<view v-if="loading" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 9999; display: flex; align-items: center; justify-content: center;">
			<view style="color: #fff; font-size: 32rpx;">加载中...</view>
		</view>

		&lt;!&ndash; 顶部标题栏 &ndash;&gt;
		<view class="header">
			<view class="header-content">
				<text class="page-title">班级课时管理</text>
				<text class="page-subtitle">查看各班级剩余课时</text>
			</view>
		</view>

		&lt;!&ndash; 总课时概览 &ndash;&gt;
		<view class="overview-card">
			<view class="card-glow"></view>
			<view class="overview-content">
				<view class="total-section">
					<text class="total-label">总剩余课时</text>
					<view class="total-display">
						<text class="total-number">{{ totalRemainingHours }}</text>
						<text class="total-unit">节</text>
					</view>
				</view>
				<view class="enrolled-section">
					<text class="enrolled-text">已报名 {{ classHoursList ? classHoursList.length : 0 }} 个班级</text>
				</view>
			</view>
		</view>

		&lt;!&ndash; 班级课时列表 &ndash;&gt;
		<view class="class-list">
			<view class="section-header">
				<text class="section-title">班级详情</text>
				<view class="title-divider"></view>
			</view>

			&lt;!&ndash; 调试信息 &ndash;&gt;
			<view style="padding: 20rpx; background: rgba(255,0,0,0.1); margin-bottom: 20rpx; border-radius: 10rpx;">
				<text style="color: #fff; font-size: 24rpx; display: block;">
					调试: classHoursList.length = {{ classHoursList.length }}, loading = {{ loading }}
				</text>
			</view>

			&lt;!&ndash; 有数据时显示列表 &ndash;&gt;
			<view v-if="classHoursList && classHoursList.length > 0" class="class-cards">
				<view v-for="(item, index) in classHoursList" :key="index"
					  class="class-card"
					  @click="viewClassLogs(item)">
					<view class="card-background"></view>
					<view class="class-header">
						<view class="class-info">
							<text class="class-name">{{ item.className }}</text>
							<text class="class-type">{{ item.classType === 'COMPREHENSIVE' ? '综合班' : item.classType === 'ADVANCED' ? '进阶班' : item.classType === 'SPRINT' ? '冲刺班' : item.classType }}</text>
						</view>
						<view class="class-status" :class="item.remainingHours <= 0 ? 'status-empty' : item.remainingHours <= 5 ? 'status-low' : 'status-normal'">
							<text class="status-text">{{ item.remainingHours <= 0 ? '已用完' : item.remainingHours <= 5 ? '即将用完' : '充足' }}</text>
						</view>
					</view>

					<view class="class-stats">
						<view class="stat-item">
							<text class="stat-label">总课时</text>
							<text class="stat-value">{{ item.totalHours || 0 }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">已用</text>
							<text class="stat-value">{{ item.usedHours || 0 }}</text>
						</view>
						<view class="stat-item highlight">
							<text class="stat-label">剩余</text>
							<text class="stat-value">{{ item.remainingHours || 0 }}</text>
						</view>
					</view>

					<view class="progress-section">
						<view class="progress-bar">
							<view class="progress-fill"
								  :style="{ width: (item.totalHours || 0) === 0 ? '0%' : Math.min(((item.usedHours || 0) / (item.totalHours || 0)) * 100, 100) + '%' }"></view>
						</view>
						<text class="progress-text">{{ (item.totalHours || 0) === 0 ? '0%' : '已使用 ' + Math.round(((item.usedHours || 0) / (item.totalHours || 0)) * 100) + '%' }}</text>
					</view>

					<view class="action-hint">
						<text class="hint-text">点击查看课时记录 →</text>
					</view>
				</view>
			</view>

			&lt;!&ndash; 空状态 &ndash;&gt;
			<view v-else class="empty-state">
				<view class="empty-icon">📚</view>
				<text class="empty-title">暂无班级数据</text>
				<text class="empty-subtitle">请联系管理员为您分配班级课程</text>
				<button class="contact-btn" @click="contactAdmin">联系管理员</button>
			</view>
		</view>

		&lt;!&ndash; 底部操作区 &ndash;&gt;
		<view class="bottom-actions">
			<button class="action-btn secondary" @click="refreshData">
				<text class="btn-text">🔄 刷新数据</text>
			</button>
			<button class="action-btn primary" @click="goToRecharge">
				<text class="btn-text">💰 课时充值</text>
			</button>
		</view>
	</view>
</template>

<script>
import { API_CONFIG, getApiUrl, apiRequest } from '@/config/api.js'

export default {
	data() {
		console.log('Vue data 初始化')
		return {
			classHoursList: [], // 初始化为空数组
			totalRemainingHours: 0, // 初始化为0
			loading: false // 初始化为false
		}
	},
	onLoad() {
		console.log('页面onLoad，设置测试数据')
		// 先设置一些测试数据验证响应式系统
		this.classHoursList = [
			{ className: '测试班级', classType: 'COMPREHENSIVE', totalHours: 10, usedHours: 2, remainingHours: 8, classId: 999 }
		]
		this.totalRemainingHours = 8
		console.log('测试数据设置完成，this.classHoursList.length:', this.classHoursList.length)

		// 延迟1秒后加载真实数据
		setTimeout(() => {
			this.loadClassHours()
		}, 1000)
	},
	onShow() {
		this.loadClassHours()
	},
	onPullDownRefresh() {
		this.refreshData()
	},
	methods: {
		/**
		 * 加载班级课时数据
		 */
		async loadClassHours() {
			try {
				this.loading = true
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}

				const response = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.CLASS_HOURS_MY),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				if (response.code === 200) {
					const data = response.data
					console.log('API返回的原始数据:', data)
					console.log('即将赋值的studentHours:', data.studentHours)
					console.log('即将赋值的totalRemainingHours:', data.totalRemainingHours)

					// 赋值前的状态
					console.log('赋值前 this.classHoursList:', this.classHoursList)
					console.log('赋值前 this.totalRemainingHours:', this.totalRemainingHours)

					// 执行赋值
					this.classHoursList = data.studentHours || []
					this.totalRemainingHours = data.totalRemainingHours || 0

					// 赋值后的状态
					console.log('赋值后 this.classHoursList:', this.classHoursList)
					console.log('赋值后 this.classHoursList.length:', this.classHoursList.length)
					console.log('赋值后 this.totalRemainingHours:', this.totalRemainingHours)

					// 验证数据类型
					console.log('classHoursList是否为数组:', Array.isArray(this.classHoursList))
					console.log('classHoursList类型:', typeof this.classHoursList)

					console.log('数据设置成功，classHoursList长度:', this.classHoursList.length)
				} else {
					// 如果获取失败，显示空数据
					this.classHoursList = []
					this.totalRemainingHours = 0
					uni.showToast({
						title: response.message || '获取数据失败',
						icon: 'none',
						duration: 2000
					})
				}
			} catch (error) {
				console.error('获取班级课时失败:', error)
				// 获取失败时显示空数据
				this.classHoursList = []
				this.totalRemainingHours = 0
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none',
					duration: 2000
				})
			} finally {
				this.loading = false
				uni.stopPullDownRefresh()
			}
		},

		/**
		 * 获取班级类型文本
		 */
		getClassTypeText(classType) {
			const typeMap = {
				'COMPREHENSIVE': '综合班',
				'ADVANCED': '进阶班',
				'SPRINT': '冲刺班'
			}
			return typeMap[classType] || classType
		},

		/**
		 * 获取状态样式类
		 */
		getStatusClass(remainingHours) {
			if (remainingHours <= 0) return 'status-empty'
			if (remainingHours <= 5) return 'status-low'
			return 'status-normal'
		},

		/**
		 * 获取状态文本
		 */
		getStatusText(remainingHours) {
			if (remainingHours <= 0) return '已用完'
			if (remainingHours <= 5) return '即将用完'
			return '充足'
		},

		/**
		 * 获取进度条宽度
		 */
		getProgressWidth(item) {
			const total = item.totalHours || 0
			const used = item.usedHours || 0
			if (total === 0) return '0%'
			const percentage = Math.min((used / total) * 100, 100)
			return `${percentage}%`
		},

		/**
		 * 获取进度文本
		 */
		getProgressText(item) {
			const total = item.totalHours || 0
			const used = item.usedHours || 0
			if (total === 0) return '0%'
			const percentage = Math.round((used / total) * 100)
			return `已使用 ${percentage}%`
		},

		/**
		 * 查看班级课时记录
		 */
		viewClassLogs(classItem) {
			uni.navigateTo({
				url: `/pages/class-hours/logs?classId=${classItem.classId}&className=${classItem.className}`
			})
		},

		/**
		 * 刷新数据
		 */
		async refreshData() {
			await this.loadClassHours()
			uni.showToast({
				title: '刷新成功',
				icon: 'success',
				duration: 1000
			})
		},

		/**
		 * 前往充值页面
		 */
		goToRecharge() {
			uni.navigateTo({
				url: '/pages/recharge/recharge'
			})
		},

		/**
		 * 联系管理员
		 */
		contactAdmin() {
			uni.navigateTo({
				url: '/pages/service/service'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 50%, #1E2332 100%);
	padding: 0 30rpx 30rpx;
}

.header {
	padding: 60rpx 0 40rpx;
	text-align: center;

	.header-content {
		.page-title {
			font-size: 48rpx;
			font-weight: bold;
			color: #FFFFFF;
			display: block;
			margin-bottom: 10rpx;
			text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
		}

		.page-subtitle {
			font-size: 28rpx;
			color: #AAB4BE;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}
	}
}

.overview-card {
	position: relative;
	margin-bottom: 40rpx;
	padding: 40rpx 30rpx;
	background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
	border-radius: 24rpx;
	overflow: hidden;
	border: 1rpx solid rgba(0, 184, 212, 0.3);

	.card-glow {
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(0, 184, 212, 0.1) 0%, transparent 70%);
		animation: pulse-glow 3s ease-in-out infinite alternate;
	}

	.overview-content {
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.total-section {
			.total-label {
				font-size: 28rpx;
				color: #AAB4BE;
				display: block;
				margin-bottom: 10rpx;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}

			.total-display {
				display: flex;
				align-items: baseline;

				.total-number {
					font-size: 56rpx;
					color: #00B8D4;
					font-weight: bold;
					text-shadow: 0 0 20rpx rgba(0, 184, 212, 0.5);
				}

				.total-unit {
					font-size: 28rpx;
					color: rgba(255, 255, 255, 0.7);
					margin-left: 10rpx;
				}
			}
		}

		.enrolled-section {
			text-align: right;

			.enrolled-text {
				font-size: 26rpx;
				color: #AAB4BE;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}
		}
	}
}

.class-list {
	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.section-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-right: 20rpx;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}

		.title-divider {
			flex: 1;
			height: 2rpx;
			background: linear-gradient(90deg, #00B8D4 0%, transparent 100%);
		}
	}

	.class-cards {
		.class-card {
			position: relative;
			margin-bottom: 30rpx;
			padding: 30rpx;
			background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
			border-radius: 20rpx;
			overflow: hidden;
			border: 1rpx solid rgba(0, 184, 212, 0.2);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
				border-color: rgba(0, 184, 212, 0.5);
			}

			.card-background {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(135deg, rgba(0, 184, 212, 0.05) 0%, transparent 100%);
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			&:active .card-background {
				opacity: 1;
			}

			.class-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 25rpx;

				.class-info {
					.class-name {
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;
						display: block;
						margin-bottom: 8rpx;
						text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
					}

					.class-type {
						font-size: 24rpx;
						color: #AAB4BE;
						text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
					}
				}

				.class-status {
					padding: 8rpx 16rpx;
					border-radius: 20rpx;

					&.status-normal {
						background: rgba(76, 175, 80, 0.2);
						border: 1rpx solid rgba(76, 175, 80, 0.5);

						.status-text {
							color: #4CAF50;
						}
					}

					&.status-low {
						background: rgba(255, 152, 0, 0.2);
						border: 1rpx solid rgba(255, 152, 0, 0.5);

						.status-text {
							color: #FF9800;
						}
					}

					&.status-empty {
						background: rgba(244, 67, 54, 0.2);
						border: 1rpx solid rgba(244, 67, 54, 0.5);

						.status-text {
							color: #F44336;
						}
					}

					.status-text {
						font-size: 22rpx;
						font-weight: 500;
					}
				}
			}

			.class-stats {
				display: flex;
				justify-content: space-between;
				margin-bottom: 25rpx;

				.stat-item {
					text-align: center;

					&.highlight {
						.stat-value {
							color: #00B8D4;
							font-weight: bold;
						}
					}

					.stat-label {
						font-size: 22rpx;
						color: #AAB4BE;
						display: block;
						margin-bottom: 5rpx;
						text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
					}

					.stat-value {
						font-size: 28rpx;
						color: #FFFFFF;
						font-weight: 600;
						text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
					}
				}
			}

			.progress-section {
				margin-bottom: 20rpx;

				.progress-bar {
					height: 8rpx;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 4rpx;
					overflow: hidden;
					margin-bottom: 10rpx;

					.progress-fill {
						height: 100%;
						background: linear-gradient(90deg, #00B8D4 0%, #1976D2 100%);
						transition: width 0.3s ease;
					}
				}

				.progress-text {
					font-size: 22rpx;
					color: #AAB4BE;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
				}
			}

			.action-hint {
				text-align: center;

				.hint-text {
					font-size: 24rpx;
					color: #00B8D4;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
				}
			}
		}
	}

	.empty-state {
		text-align: center;
		padding: 80rpx 30rpx;

		.empty-icon {
			font-size: 120rpx;
			margin-bottom: 30rpx;
		}

		.empty-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			display: block;
			margin-bottom: 15rpx;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}

		.empty-subtitle {
			font-size: 26rpx;
			color: #AAB4BE;
			display: block;
			margin-bottom: 40rpx;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}

		.contact-btn {
			padding: 20rpx 40rpx;
			background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
			color: #FFFFFF;
			border: none;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-weight: 600;
			box-shadow: 0 8rpx 24rpx rgba(0, 184, 212, 0.3);

			&:active {
				transform: scale(0.95);
			}
		}
	}
}

.bottom-actions {
	display: flex;
	gap: 20rpx;
	margin-top: 40rpx;
	padding-bottom: 30rpx;

	.action-btn {
		flex: 1;
		padding: 25rpx;
		border: none;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 600;
		transition: all 0.3s ease;

		&.secondary {
			background: rgba(255, 255, 255, 0.1);
			border: 1rpx solid rgba(255, 255, 255, 0.2);

			.btn-text {
				color: #AAB4BE;
			}

			&:active {
				background: rgba(255, 255, 255, 0.2);
				transform: scale(0.95);
			}
		}

		&.primary {
			background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
			box-shadow: 0 8rpx 24rpx rgba(0, 184, 212, 0.3);

			.btn-text {
				color: #FFFFFF;
			}

			&:active {
				transform: scale(0.95);
				box-shadow: 0 4rpx 12rpx rgba(0, 184, 212, 0.4);
			}
		}
	}
}

@keyframes pulse-glow {
	from {
		opacity: 0.5;
		transform: scale(1);
	}
	to {
		opacity: 0.8;
		transform: scale(1.05);
	}
}
</style> -->
